<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="志愿分析" :isBatch="true" @change="batchChange" />
		<view class="container">
			<view class="search-box fboxRow Xcenter">
				<input class="search-input flex1 font26" type="text" v-model="searchValue" placeholder="查询院校名称、属地"
					placeholder-style="color:#9899A1" confirm-type='search' @input="change" @confirm="search" />
				<view class="right fboxRow Xcenter Ycenter" v-if="searchValue" @tap="clearInput"><text
						class="bksCIcon bks-c-ziyuan150guanbi font12 color-fff"></text></view>
			</view>
			 <u-tabs :current="tabIndex" :list="tabList" @click="onTabChange" lineColor="#00C15D" :scrollable="false"></u-tabs>
			 <view class="list">
				<view class="item" v-for="(item, index) in schoolList.list" :key="index">
					<view class="space-block"></view>
					<view class="content-box">
						<view class="top fboxRow Xbetween" @tap="gotoDetail(item)">
							<view class="left fboxRow Ycenter font30">
								<view class="color-36363A">{{item.schoolName}}</view>
								<image class="icon" v-if="item.range == 1" src="@/static/img/bks/chong.jpg"></image>
								<image class="icon" v-if="item.range == 2" src="@/static/img/bks/wen.jpg"></image>
								<image class="icon" v-if="item.range == 3" src="@/static/img/bks/bao.jpg"></image>
							</view>
							<!--  {{item.range == 1 ? 'color-FA8C70': item.range == 2 ? 'color-61D89B' : 'color-8FB6F7'}} -->
							<view
								class="right font26"
								:class="{'color-FA8C70': item.range == 1, 'color-61D89B': item.range == 2, 'color-8FB6F7': item.range == 3 }">
								找专业，填志愿
							</view>
						</view>
						<view class="middle fboxRow" @tap="gotoDetail(item)">
							<image class="logo" :src="item.logo"></image>
							<view class="fboxCol Xaround flex1">
								<view class="color-6A6A6F font26">
									录取概率：{{item.admitRate}}，院校代码：{{item.codeEnroll}}</view>
								<view class="tags fboxWrap">
									<view v-for="(sub, i) in item.tags" :key="i" class="tag font22">{{sub}}</view>
								</view>
							</view>
						</view>
						<view class="bottom fboxRow Xaround">
							<view class="item font22">
								<view class="color-9899A1">{{item.year - 1}}最低分</view>
								<view class="color-36363A mt8">
									{{item.min != null ? item.min + '分' : '-'}}
								</view>
							</view>
							<view class="item font22">
								<view class="color-9899A1">{{item.year - 1}}最低位次</view>
								<view class="color-36363A mt8">
									{{item.minSection != null ? item.minSection + '名' : '-'}}
								</view>
							</view>
							<view class="item font22">
								<view class="color-9899A1">{{item.year - 1}}录取</view>
								<view class="color-36363A mt8">
									{{item.recruitNum != null ? item.recruitNum + '人' : '-'}}
								</view>
							</view>
							<view class="item font22" v-if="isPlan">
								<view class="color-9899A1">{{item.year}}计划</view>
								<view class="color-36363A mt8">
									{{item.recruitNumPlan != null ? item.recruitNumPlan + '人' : '-'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore style="padding-bottom: 40rpx;" :status="schoolList.loading"></u-loadmore>
			 </view>
			<view class="btn-group">
				<view class="btn" @tap="showTips">
					<text class="bksCIcon bks-c-ziyuan158tanhao color-fff font42"></text>
				</view>
				<view class="btn" @tap="goPage">
					<text class="bksCIcon bks-c-ziyuan160wodezhiyuan color-fff font42"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import { forecastSchool } from '@/api/bks.volunteer.js'
	import { commentState } from '@/api/bks.consult.js'
	import {BottomMore, ListLoad, PageScroll} from '@/pagesBKS/components/minx.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				activeTab: 0,
				tabIndex: 0,
				tabList:[{name: '全部'},{name: '冲刺'},{name: '稳妥'}, {name: '保底'}],
				schoolList: { //推荐院校列表
					list: [],
					page: 1,
					size: 20,
					total: 0,
					loading: 'none'
				},
				limit: [0, 3],
				counList: [],
				batchName: '本科批',
				searchValue: '',
				refresherTriggered: false,
				examAnalysisId: '',
				scrollTop: 0,
				isPlan: false
			}
		},
		onLoad(options) {
			// activeTab等于默认值0直接请求, 不等于van-tabs会自动执行change事件
			this.activeTab = Number(options.activeTab || 0)
			this.examAnalysisId = options.examAnalysisId || ''
			if (options.activeTab == this.activeTab || !options.activeTab) {
				this.tabIndex = options.activeTab
				this.getForecastSchool()
			}
			commentState({
				type: 2
			}).then(res => {
				this.isPlan = res.data
			})
		},
		methods: {
			// 数据初始化
			init() {
				this.schoolList = {
					list: [],
					page: 1,
					size: 20,
					total: 0,
					loading: 'loading'
				}
				this.limit = [0, 3]
			},
			change(e) {
				this.init()
				this.getForecastSchool()
			},
			// 搜索功能
			search: function(e) {
				this.init()
				this.getForecastSchool()
			},
			// 清空搜索框
			clearInput: function() {
				this.searchValue = ''
				this.init()
				this.getForecastSchool()
			},
			// tab切换
			onTabChange(e) {
				this.activeTab = e.index
				this.init()
				this.getForecastSchool()
			},
			// 批次切换
			batchChange(e) {
				this.batchName = e.name
				this.init()
				this.getForecastSchool()
			},
			// 获取推荐院校列表
			getForecastSchool() {
				if (this.schoolList.loading == 'nomore') {
					return
				}
				this.schoolList.loading = 'loading'
				forecastSchool({
					range: this.activeTab,
					batchName: this.batchName,
					province: '',
					schoolName: this.searchValue,
					examAnalysisId: this.examAnalysisId,
					page: this.schoolList.page,
					size: this.schoolList.size
				}).then(res => {
					const {list, pageInfoVO: {total, page, size}} = res.data
					let resList = []
					list.forEach(item => {
						item.admitRate = Math.round(item.admitRate * 100) + '%'
						resList.push(item)
					})
					this.schoolList.list = this.schoolList.list.concat(resList)
					this.schoolList.total = total
					const that = this
					ListLoad(page, size, total, (state) => {
						that.schoolList.loading = state
					})
				})
			},
			// 下拉加载数据
			reachBottom() {
				const that = this
				BottomMore(this.schoolList, (state, res) => {
					that.schoolList.loading = res.loading
					that.schoolList.page = res.page
					if (state) {
						that.getForecastSchool()
					}
				})
			},
			// 跳转招生专业
			gotoDetail(e) {
				uni.setStorageSync('forecastSchoolInfo', e)
				this.$pageTo('/bks/volunteer/academy/detail/index', {
					batchName: this.batchName,
					examAnalysisId: this.examAnalysisId
				})
			},
			// 展示tips
			showTips() {
				uni.showModal({
					showCancel: false,
					confirmColor: '#00C15D',
					content: '数据来源于院校相关年限的招生计划与分数，且这些数据都来源于网络收集，备考生基于这些数据与成绩大数据进行智能分析，数据与分析结果仅供参考，本页数据仅是志愿的模拟，真实志愿请以考试院填报为准，感谢您的关注。'
				})
			},
			// 跳转模拟志愿
			goPage() {
				this.$pageTo('/bks/volunteer/mockVolunteer/index')
			},
		},

		// onPageScroll(ev) {
		// 	PageScroll(ev, this, (res) => {
		// 		this.schoolList.loading = res.loading
		// 		this.scrollTop = res.scrollTop
		// 		this.limit = res.limit
		// 	})
		// },
		onReachBottom: function() {
			this.reachBottom()
		},
	}
</script>

<style lang="scss" scoped>
	.tags .tag {
	  padding: 0 16rpx;
	  background: #F5F5FA;
	  border-radius: 3px;
	  height: 36rpx;
	  line-height: 36rpx;
	  color: #9899A1;
	  margin-top: 6rpx;
	  margin-right: 12rpx;
	}
	
	.search-box{margin: 10rpx auto; width: 690rpx;height: 68rpx;background: #F5F6F6;border-radius: 34rpx;}
	.search-box .search-input{padding: 0 30rpx;width: 100%;height: 68rpx;}
	.search-box .right{padding: 0 30rpx;}
	.search-box .bksCIcon{background-color: #9899A1;width: 30rpx;height: 30rpx;line-height: 30rpx;text-align: center; border-radius: 50%;overflow: hidden;}
	
	.container {
	  position: relative;
	}
	
	.container .btn-group {
	  position: fixed;
	  bottom: 98rpx;
	  right: 23rpx;
	}
	.container .btn-group .btn {
	  width: 88rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  text-align: center;
	  background: linear-gradient(-45deg, #FAA40F 0%, #FFCE7A 100%);
	  box-shadow: 0px 0px 10rpx 0px rgba(0, 8, 16, 0.1);
	  border-radius: 50%;
	  margin-top: 30rpx;
	}
	
	.list .item .content-box {
	  padding: 40rpx 30rpx;
	
	}
	.list .item .content-box .top .icon {
	  width: 28rpx;
	  height: 32rpx;
	  margin-left: 7rpx;
	}
	.list .item .content-box .middle {
	  padding: 20rpx 0 30rpx;
	  border-bottom: 1px solid #F0F0F5;
	}
	
	.list .item .content-box .middle .logo {
	  width: 96rpx;
	  height: 96rpx;
	  border-radius: 50%;
	  margin-right: 25rpx;
	}
	
	.list .item .content-box .bottom {
	  padding-top: 30rpx;
	  text-align: center;
	}
</style>